<template>
    <div>

        <span v-show="number>0" class='fa fa-minus-circle reduce' @click='reduceClick'></span>

        <span v-show="number>0" class='number'>{{number}}</span>

        <span class='fa  fa-plus-circle add' @click='addClick'></span> 
    </div>
</template>
<script>
    export default{
        data:function(){
            return {
                number:0,
            }
        },
        methods:{
            reduceClick:function(){
                this.number--
            },
            addClick:function(){
                this.number++
                this.$emit('addFood',this.number)
            }
        }
    }
</script>
<style scoped>
    .number{
        color: #666;
    }
    .add{
        color: #3190E8;
    }
</style>